/* 全局css变量 */
//$--color-primary: #409EFF;
$--color-primary: var(--vf-color-primary, #409EFF);

@font-face {
  font-family: '仿宋_GB2312';
  /* 自定义字体的名称 */
  src: url('http://10.224.135.53/zhlxstatic/fonts/FangSong_GB2312.ttf') format('ttf');
  /* 字体文件的路径和格式 */
}

.primary-color {
  color: $--color-primary;
}

.background-opacity {
  background: rgba(64, 158, 255, 0.6);
}

.widget-form, .form-widget-list, .drag-drop-zone {
  .ghost{
    content: '';
    font-size: 0;
    height: 3px;
    box-sizing: border-box;
    background: $--color-primary;
    border: 2px solid $--color-primary;
    outline-width: 0;
    padding: 0;
    overflow: hidden;
  }
}

.el-form-item {
  --el-form-inline-content-width: none;
  align-items: center; // 如有影响 可以去掉
  .el-form-item__content {
    min-width: var(--el-form-inline-content-width) !important;
  }

}

.el-form-item--large {
  .el-form-item__label {
    height: 44px !important;
  }
}

.el-form-item--default {
  .el-form-item__label {
    height: 36px !important;
  }
}

.el-form-item--small {
}

.el-card {
  margin-top: 3px;
  margin-bottom: 3px;
}

.readonly-mode-form .el-form-item__content {  
  //padding: 0 6px 0 6px !important;
  //border-radius: 5px !important;
  background-color: #fff; /* 只读查看状态-默认底色 */
}

/* 只读状态-单选框、多选框、多选框带输入框选中状态 */
.el-radio__input.is-disabled.is-checked .el-radio__inner {
  background-color: #838383 !important;
}

input[type="password"]::-ms-reveal { /* 隐藏IE/Edge原生的密码查看按钮 */  
  display: none;
}

.auto-full-width.el-date-editor.el-input, .auto-full-width.el-date-editor.el-input__inner {
  width: 100% !important;
}

/* 滚动条样式 begin */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  width: 8px;
  background: rgba(#101F1C, 0.1);
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(#101F1C, 0.35);
  background-clip: padding-box;
  min-height: 28px;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgba(#101F1C, 0.85);
}

* {
  //Firefox浏览器滚动条样式
  scrollbar-color: #e5e5e5 #f7f7f9; //滚动条轨道颜色、滚动条滑块的颜色
  scrollbar-width: thin; //thin模式下滚动条两端的三角按钮会消失
}


/*
body {//IE浏览器滚动条样式
  scrollbar-shadow-color: #e5e5e5;
  scrollbar-face-color: #e5e5e5;
  scrollbar-base-color: #ffffff;
  scrollbar-arrow-color: #444040;
}
*/

/* 滚动条样式 end */

/*
移动端下拉弹出
*/
.select-popup {
  border-radius: 24px 24px 0 0;
  .pop-box {
    min-height: 40px;
    border-radius: 24px 24px 0 0;
    box-sizing: border-box;
    padding-top: 10px;
    font-size: 16px;
    .pop-header {
      height: 40px;
      line-height: 40px;
      box-sizing: border-box;
      text-align: center;
      .pop-title {
        font-weight: bold;
        font-size: 18px;
        display: inline-block;
        max-width: 60%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .van-picker__cancel {
        float: left;
        height: 40px;
        cursor: pointer;
      }
      .van-picker__confirm {
        float: right;
        cursor: pointer;
      }
    }
    .pop-body {
      padding: 10px 0;
      .pop-list-box {
        max-height: 200px;
        overflow-y: auto;
        overflow-x: hidden;
        font-size: 14px;
        box-sizing: border-box;
        padding-left: 15px;
        padding-right: 9px;
        .tab-item-li {
          cursor: pointer;
          box-sizing: border-box;
          line-height: 36px;
          height: 36px;
          border-bottom: 1px solid #dcdfe6;
          padding: 0 20px;
          &:last-child {
            border-bottom: 0;
          }
          .tab-item-icon {
            float: right;
            .tab-item-icon-el {
              position: relative;
              top: 4px;
            }
          }
        }
      }
    }
  }
}

.hide-popper .el-select__popper {
  display: none !important;
}

/**** 自定义样式 start **/
//标题自定义冒号class
.form-widget-canvas,
.form-render-wrapper {

  .dataMappingIcon {
    position: absolute;
    right: 20px;
    cursor: pointer;
    color: #2E5CF6
  }

  .zhlx-detailTable {
    width: 100%;
  }

  .container-wrapper {
    >.el-row {
      height: var(--item-height-variable);
      min-height: var(--item-min-height-variable);
    }
  }

  .static-content-item {
    display: flex !important;
    align-items: var(--content-align-variable);
    margin: var(--content-margin-top-variable) var(--content-margin-right-variable) var(--content-margin-bottom-variable) var(--content-margin-left-variable, unset) !important;
    padding: var(--content-padding-top-variable) var(--content-padding-right-variable) var(--content-padding-bottom-variable) var(--content-padding-left-variable) !important;
    border: var(--content-border-variable);
    border-top: var(--content-border-top-variable, var(--content-border-variable));
    border-right: var(--content-border-right-variable, var(--content-border-variable));
    border-bottom: var(--content-border-bottom-variable, var(--content-border-variable));
    border-left: var(--content-border-left-variable, var(--content-border-variable));
    font-family: var(--content-font-family-variable);
    color: var(--content-font-color-variable);
    font-size: var(--content-font-size-variable);
    line-height: var(--content-line-height);
    height: var(--item-height-variable) !important;
    min-height: var(--item-min-height-variable);
    flex-direction: var(--form-item-align-variable, row) !important;

    pre {
      font-family: var(--content-font-family-variable);
      color: var(--content-font-color-variable);
      font-size: var(--content-font-size-variable);
      align-items: var(--content-align-variable) !important;
      text-align: var(--content-vertical-align-variable, left) !important;
    }
  }

  .el-form-item {
    padding: 0px !important;
    .el-form-item__content {
      line-height: var(--content-line-height);
      .el-input {
        height: var(--content-line-height);
        line-height: var(--content-line-height);
      }
      .el-radio-group {
        .el-radio {
          // 避免默认height: 32px; 值影响行高效果
          height: auto;
        }
      }
    }
    // 设置只读模式下的表单字段的padding
    .readonly-mode-field {
      padding-left: 10px;
      display: inline-block;
      width: 100%;
      line-height: initial;
      line-height: var(--content-line-height);
      flex: 1;
    }
  }

  .el-form-item:not(.table) {
    display: flex;
    overflow: hidden;
    height: var(--item-height-variable);
    min-height: var(--item-min-height-variable);
    flex-direction: var(--form-item-align-variable, row);

    .zhlx-log-container {
      .log-content {
        padding-left: var(--form-item-left-padding-variable);
      }
    }


    .el-form-item__label {
      position: relative;
      // display: var(--label-text-align-display);
      display: flex;
      align-self: stretch;
      font-weight: bold;
      font-family: var(--font-family-variable) !important;
      width: var(--label-width-variable) !important;
      margin: var(--label-margin-top-variable) var(--label-margin-right-variable) var(--label-margin-bottom-variable, 5px) var(--label-margin-left-variable) !important;
      padding: var(--label-padding-top-variable) var(--label-padding-right-variable) var(--label-padding-bottom-variable) var(--label-padding-left-variable) !important;
      background-color: var(--label-background-color-variable, #ffffff);
      color: var(--font-color-variable);
      /* 使用变量 */
      font-size: var(--font-size-variable);
      font-family: var(--font-family-variable);
      text-align: var(--label-justify-content-variable) !important;
      border: var(--label-border-variable) !important;
      border-top: var(--label-border-top-variable, var(--label-border-variable)) !important;
      border-right: var(--label-border-right-variable, var(--label-border-variable)) !important;
      border-bottom: var(--label-border-bottom-variable, var(--label-border-variable)) !important;
      border-left: var(--label-border-left-variable, var(--label-border-variable)) !important;
      letter-spacing: var(--label-width-space-variable);
      align-items: var(--font-align-variable);
      justify-content: var(--font-align-row-variable) !important;
      height: var(--label-height--variable);
      text-align-last: var(--label-text-align-last);
      padding-right: var(--label-text-align-padding) !important;
      line-height: var(--label-text-align-lineHeight);
      min-height: var(--label-min-height);
      white-space: var(--label-white-space) !important;

      &::after {
        display: var(--label-has-colon-variable);
        content: ':';
        right: 0px;
        top: var(--label-colon-top-variable);
        transform: translate(0, calc(-1 * var(--label-colon-top-variable)));
        width: 5px !important;
        position: relative;
      }

      .custom-label {
        width: var(--label-text-span-width);
      }
    }

    .el-form-item__content {
      flex: 1;
      display: flex;
      height: auto;
      align-self: stretch; // form-item值区域高度撑满
      align-items: var(--content-align-variable);
      margin: var(--content-margin-top-variable) var(--content-margin-right-variable) var(--content-margin-bottom-variable) var(--content-margin-left-variable, unset) !important;
      padding: var(--content-padding-top-variable) var(--content-padding-right-variable) var(--content-padding-bottom-variable) var(--content-padding-left-variable) !important;
      border: var(--content-border-variable);
      border-top: var(--content-border-top-variable, var(--content-border-variable));
      border-right: var(--content-border-right-variable, var(--content-border-variable));
      border-bottom: var(--content-border-bottom-variable, var(--content-border-variable));
      border-left: var(--content-border-left-variable, var(--content-border-variable));
      font-family: var(--content-font-family-variable);
      color: var(--content-font-color-variable);
      font-size: var(--content-font-size-variable);
      line-height: var(--content-line-height);
      .el-input-group__prepend,
      .el-input-group__append {
        padding: 0 var(--append-padding) !important;
        background-color: var(--apend-back-color) !important;
        box-shadow: none !important;
        color: var(--content-font-color-variable) !important;
      }



      input,
      textarea,
      .zhlx-log-container .log-content {
        text-align: var(--content-vertical-align-variable, left);
        font-family: var(--content-font-family-variable);
        color: var(--content-font-color-variable);
        font-size: var(--content-font-size-variable);
        background-color: var(--content-background-color-variable, #fff);
      }

      input::placeholder,
      textarea::placeholder {
        text-align: var(--content-vertical-align-variable, left);
        font-family: var(--content-font-family-variable);
        font-size: var(--content-font-size-variable);
        background-color: var(--content-background-color-variable, #fff);
      }

      .el-textarea__inner {
        padding: 0 0 0 8px;
        line-height: var(--form-item-textarea-lineHigh-variable);
        align-items: var(--content-align-variable);
        text-align: var(--content-vertical-align-variable, left);
      }

      .el-checkbox {
        text-align: var(--content-vertical-align-variable, left);
        font-family: var(--content-font-family-variable);
        font-size: var(--content-font-size-variable);
        background-color: var(--content-background-color-variable, #fff);
        color: var(--content-font-color-variable) !important;

        .el-checkbox__label {
          text-align: var(--content-vertical-align-variable, left);
          font-family: var(--content-font-family-variable);
          font-size: var(--content-font-size-variable);
          color: var(--content-font-color-variable) !important;
        }
      }

      .el-radio {
        text-align: var(--content-vertical-align-variable, left);
        font-family: var(--content-font-family-variable);
        font-size: var(--content-font-size-variable);
        background-color: var(--content-background-color-variable, #fff);
        color: var(--content-font-color-variable) !important;

        .el-radio__label {
          text-align: var(--content-vertical-align-variable, left);
          font-family: var(--content-font-family-variable);
          font-size: var(--content-font-size-variable);
          color: var(--content-font-color-variable) !important;
        }
      }

      &>div:first-child:not(.el-color-picker, .ml10) {
        width: 100%;
        font-family: var(--content-font-family-variable);
        color: var(--content-font-color-variable);
        font-size: var(--content-font-size-variable);
        align-items: var(--content-align-variable);
        text-align: var(--content-vertical-align-variable, left);

        >.popupSelect-container {
          width: 100%;
          font-family: var(--content-font-family-variable);
          color: var(--content-font-color-variable);
          font-size: var(--content-font-size-variable);
          align-items: var(--content-align-variable);
          text-align: var(--content-vertical-align-variable, left);
          display: flex;
        }
      }

      .el-select__wrapper {
        font-family: var(--content-font-family-variable);
        color: var(--content-font-color-variable);
        font-size: var(--content-font-size-variable);
        align-items: var(--content-align-variable);
        text-align: var(--content-vertical-align-variable, left);
      }


      .el-select__selected-item {
        span {
          color: var(--content-font-color-variable);
        }
      }

      .readonly-mode-field {
        align-items: var(--content-align-variable);
        text-align: var(--content-vertical-align-variable, left);
        word-break: break-all; // 处理纯文字/字母换行
        line-height: var(--content-line-height);
      }
    }
  }


  .el-descriptions-item__label {
    width: var(--label-width-variable);
    margin: var(--label-margin-top-variable) var(--label-margin-right-variable) var(--label-margin-bottom-variable, 5px) var(--label-margin-left-variable) !important;
    padding: var(--label-padding-top-variable) var(--label-padding-right-variable) var(--label-padding-bottom-variable) var(--label-padding-left-variable) !important;
    background-color: var(--label-background-color-variable, #fff);
    color: var(--font-color-variable, #909399);
    /* 使用变量 */
    font-size: var(--font-size-variable);
    font-family: var(--font-family-variable);
    text-align: var(--label-justify-content-variable) !important;
    border: var(--label-border-variable) !important;
    border-top: var(--label-border-top-variable, var(--label-border-variable)) !important;
    border-right: var(--label-border-right-variable, var(--label-border-variable)) !important;
    border-bottom: var(--label-border-bottom-variable, var(--label-border-variable)) !important;
    border-left: var(--label-border-left-variable, var(--label-border-variable)) !important;
    align-items: var(--font-align-variable);
  }

  .el-descriptions-item__content {
    min-width: 50px;
    align-items: var(--content-align-variable);
    margin: var(--content-margin-top-variable) var(--content-margin-right-variable) var(--content-margin-bottom-variable) var(--content-margin-left-variable, unset) !important;
    padding: var(--content-padding-top-variable, 10px) var(--content-padding-right-variable, 10px) var(--content-padding-bottom-variable, 10px) var(--content-padding-left-variable, 10px) !important;
    font-family: var(--content-font-family-variable) !important;
    color: var(--content-font-color-variable);
    font-size: var(--content-font-size-variable);
    background-color: var(--content-background-color-variable);
    border: var(--content-border-variable) !important;
    border-top: var(--content-border-top-variable, var(--content-border-variable)) !important;
    border-right: var(--content-border-right-variable, var(--content-border-variable)) !important;
    border-bottom: var(--content-border-bottom-variable, var(--content-border-variable)) !important;
    border-left: var(--content-border-left-variable, var(--content-border-variable)) !important;

    input,
    textarea {
      text-align: var(--content-vertical-align-variable, left);
      font-family: var(--content-font-family-variable);
      color: var(--content-font-color-variable);
      font-size: var(--content-font-size-variable);
      background-color: var(--content-background-color-variable);
    }

    input::placeholder,
    textarea::placeholder {
      text-align: var(--content-vertical-align-variable, left);
      font-family: var(--content-font-family-variable);
      font-size: var(--content-font-size-variable);
      background-color: var(--content-background-color-variable);
    }


    &>div:first-child:not(.el-color-picker, .ml10) {
      width: 100%;
      font-family: var(--content-font-family-variable);
      color: var(--content-font-color-variable);
      font-size: var(--content-font-size-variable);
    }
  }
}


.isDocumentFrom {

  padding: 12px;
  overflow: hidden;

  .form-detail {
    min-height: 500px;
  }

  .table-cell {
    // height: 100% !important; // 设计器时暂时注释掉
    box-sizing: border-box !important;
    padding: 0px !important;
    vertical-align: var(--content-align-variable);
  }

  .el-input__inner {
    height: 100%;
  }

  .el-select__wrapper {
    height: 100%;
  }

  .el-textarea__inner {
    // 注释height: 100% !important; 否则多行输入最大行数/自动适应高度失效
    height: 100%;
    // height: 100% !important;
    // 注释min-height: 40px !important; 否则多行输入最小行数失效
    // min-height: 40px !important;
  }

  .el-row,
  .el-col {
    margin: 0 !important;
    padding: 0 !important;
  }

  .el-row {
    & > .el-col {
      & > .el-scrollbar {
        & > .el-scrollbar__wrap {
          & > .el-scrollbar__view {
            display: flex;
            flex-direction: column;

            // & > .field-wrapper {
            //   width: 100%;
            //   height: 100%;
            // }
          }
        }
      }
    }
  }

  /* 表单render垂直对齐  start */
  .el-row.flex-align-top {
    .el-col {
      .el-scrollbar {
        .el-scrollbar__wrap {
          .el-scrollbar__view {
            display: flex;
            flex-direction: column;
            align-items: start;
            height: 100%;

            .field-wrapper {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }
  }

  .el-row.flex-align-middle {
    .el-col {
      .el-scrollbar {
        .el-scrollbar__wrap {
          .el-scrollbar__view {
            display: flex;
            flex-direction: column;
            align-items: center;
            height: 100%;

            .field-wrapper {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }
  }

  .el-row.flex-align-bottom {
    .el-col {
      .el-scrollbar {
        .el-scrollbar__wrap {
          .el-scrollbar__view {
            display: flex;
            flex-direction: column;
            align-items: end;
            height: 100%;

            .field-wrapper {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }
  }

  /* 表单render垂直对齐  end */

  .el-form-item {
    margin-bottom: 0px !important;
    height: 100%;
    padding-top: 0px;
    padding-bottom: 0px;
    box-sizing: border-box;
  }

  .log-content {
    border: none !important;
  }

  pre {
    margin: 0px;
  }

  .el-select__wrapper {
    box-shadow: none;
  }

  .el-textarea__inner {
    box-shadow: none;
  }

  .el-input__wrapper {
    box-shadow: none;
  }

  .el-checkbox-group,
  .el-radio-group {
    padding: 0px 11px;
  }

  .el-form-item__label {
    color: var(--font-color-variable);
    /* 使用变量 */
    font-size: var(--font-size-variable);
    font-family: var(--font-family-variable);
    align-items: var(--font-align-variable);
    background-color: var(--label-background-color-variable);
  }

}

// 重置表单设计期、运行期表单必填样式
.form-widget-container .widget-form,
.form-render-wrapper .render-form {
  .required .el-form-item__label:before,
  .required .log-content {
    content: '' !important;
    margin: 0 !important;
    letter-spacing: normal !important;
  }

  // 必填且已经被校验
  .required.is-success,
  .required.has-value {

    .el-input__wrapper,
    .el-input__inner,
    .el-range-input,
    .el-radio-group,
    .el-checkbox-group,
    textarea,
    .unit-select-container,
    .popupSelect-container,
    .el-select .el-select__wrapper,
    input:valid,
    .log-content {
      background-color: rgba(255, 255, 255, 0) !important;
    }
  }

  .required {

    // .el-form-item__content {
    // background-color: #FDDEDE; // var(--el-color-danger);
    .el-input__wrapper,
    .el-input__inner,
    .el-range-input,
    .el-radio-group,
    .el-checkbox-group,
    textarea,
    .unit-select-container,
    .el-select .el-select__wrapper,
    .log-content {
      background-color: #FDDEDE !important;
    }

    // }
    .el-form-item__error {
      display: none;
    }

    input::placeholder,
    textarea::placeholder {
      // color: #000;
      // opacity: 0 !important;
      background-color: rgba(255, 255, 255, 0) !important;
    }
  }

  /** 设置背景颜色透明 **/
  // .el-form-item:not(.table) .el-form-item__content input, .el-form-item:not(.table) .el-form-item__content textarea,
  // .el-form-item:not(.table) .el-form-item__content .zhlx-log-container .log-content,
  // .form-render-wrapper .el-form-item:not(.table) .el-form-item__content input,
  // .form-render-wrapper .el-form-item:not(.table) .el-form-item__content textarea,
  // .form-render-wrapper .el-form-item:not(.table) .el-form-item__content .zhlx-log-container .log-content,
  // .input__wrapper {
  //   // background-color: rgba(255, 255, 255, 0) !important;
  // }

  /** 去除必填校验边框红色 **/
  .el-form-item.is-error .el-input__wrapper,
  .el-form-item.is-error .el-input__wrapper.is-focus,
  .el-form-item.is-error .el-input__wrapper:focus,
  .el-form-item.is-error .el-input__wrapper:hover,
  .el-form-item.is-error .el-select__wrapper,
  .el-form-item.is-error .el-select__wrapper.is-focus,
  .el-form-item.is-error .el-select__wrapper:focus,
  .el-form-item.is-error .el-select__wrapper:hover,
  .el-form-item.is-error .el-textarea__inner,
  .el-form-item.is-error .el-textarea__inner.is-focus,
  .el-form-item.is-error .el-textarea__inner:focus,
  .el-form-item.is-error .el-textarea__inner:hover {
    box-shadow: 0 0 0 1px var(--el-input-border-color, var(--el-border-color)) inset;
  }
}

/**** 自定义样式 end **/